<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    props:{
        probeType:{
            type:Number,
            default:1
        },
        click:{
            type:Boolean,
            default:true
        },
        data:{
            type:Array,
            default:null
        },
        listenScroll:{//这是属性，是否要监听滚动事件
            type: Boolean,
            default: false
        },
        pullup:{//是否开启下拉刷新
            type:Boolean,
            default: false,
        },
        beforeScroll:{
            type: Boolean,
            default: false
        },
        delayTime:{
            type:Number,
            default:20
        }
    },
    mounted(){
        setTimeout(() => {
            this._initScroll()
        }, 20);
    },
    methods:{
        //初始化滚动
        _initScroll(){
            if(!this.$refs.wrapper){
                return
            }
            this.scroll = new BScroll(this.$refs.wrapper,{
                probeType: this.probeType,//可以从外部控制
                click:  this.click
            })
            if(this.listenScroll){
                let that = this
                //监听滚动事件，滚动位置,pos是个对象，有x,y属性
                this.scroll.on('scroll',(pos)=>{
                    // 将值弹出去
                    that.$emit('scroll',pos)
                })
            }
            if(this.pullup){
                this.scroll.on("scrollEnd",() => {
                    if(this.scroll.y <= (this.scroll.maxScrollY +50 )){
                        this.$emit("scrollToEnd")
                    }
                })
            }
            if(this.beforeScroll){
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll')
                })
            }
        },
        enable(){
            this.scroll && this.scroll.enable()
        },
        disable(){
            this.scroll && this.scroll.disable()
        },
        refresh(){
            this.scroll && this.scroll.refresh()
        },
        scrollTo(){
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
        },
        scrollToElement(){
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
        }
    },
    watch:{//监听
        data(){
            setTimeout(() => {
             this.refresh()
        }, this.delayTime);
      }
    }
}
</script>
<style lang="stylus" scoped>

</style>